 

 
import React, { useEffect, useRef } from 'react';

function VideoComponent({index}:{index: number}) {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const pc = new RTCPeerConnection();
    // 添加 icecandidate 事件监听器
    pc.onicecandidate = event => {
      if (event.candidate) {
        console.log('New ICE candidate: ', event.candidate);
      }
    };

    // 添加 connectionstatechange 事件监听器
    pc.onconnectionstatechange = () => {
      console.log('Connection state changed: ', pc.connectionState);
    };

    navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        stream.getTracks().forEach(track => {
          pc.addTrack(track, stream);
        });
      })
      .then(() => {
        pc.ontrack = event => {
          if (videoRef.current) {
            videoRef.current.srcObject = event.streams[0];
          }
        };
      })
      .catch(err => console.error(err));
  }, []);

  return ( 
    <video key={ index} ref={videoRef} autoPlay muted controls={false}>
                {/* <source src={"/video.mp4"} type="video/mp4" /> */}
              </video>
  );
}

export default VideoComponent;